<template>
	<el-dialog v-model="display" :title="'编辑'+option.title" width="1200px" center top="10vh">
		<div>
            <editor ref="editorRef"></editor>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="display = false">取消</el-button>
				<el-button type="primary" @click="subForm">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {
		ElMessage,
		defaultImg,
		api
	} = publicJS();

    
	import editor from "@/components/editor.vue";
	const editorRef = ref(null);

	const emit = defineEmits(['update:show','getContent'])
	const props = defineProps({
		show: {
			type:Boolean,
			default:false
		},
		option: {
			type: Object,
			default: () => {
				return {
                    value:'',
                    title:''
                }
			}
		}
	})
	
	const display = ref(true);

	watch(props,(newVal,oldVal)=>{
		display.value = newVal.show;
	},{ immediate: true })
	
	watch(display,(newVal,oldVal)=>{
		emit('update:show', newVal)
	},{ immediate: true })

    const subForm = ()=>{
        display.value = false;
        emit('getContent',editorRef.value.content)
    }

    //赋值
    const setData = (data)=>{
        console.log(data,666)
        setTimeout(_=>{
            editorRef.value.content = data;
        },1)
    }

    defineExpose({
		setData
	})
</script>

<style scoped lang="scss">

</style>